<template>
  <div class="my-form">
    <div class="input-box">
      <input
         type="text"
         v-model="username"
         placeholder="username"
      />
    </div>
    <div class="input-box">
      <input 
        type="text" 
        v-model="password" 
        placeholder="password" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'my-form',
  props: [
    'myUsername',
    'myPassword'
  ],
  // data() {
  //   return {
  //     username:''
  //   }
  // },
  // watch: {
  //   username(newValue) {
  //     this.$emit('updata:myUsername', newValue);
  //   }
  // },
  computed: {
    username: {
      get() {
        return this.myUsername
      },
      set (newValue) {
        this.$emit('updata:myUsername', newValue);
      }
    },
    password: {
      get() {
        return this.myPassword
      },
      set(newValue) {
        this.$emit('updata:myPassword', newValue);
      }
    }
  }
}
</script>

<style>

</style>
